import { observer } from 'mobx-react-lite';
import classname from "classnames";
import Complete from './Complete';
import Editing from './Editing';
import Remove from './Remove';
import Input from './Input';

function Todo({ todo }) {
  const { isCompleted, isEditing } = todo;
  return (
    <li className={classname({ completed: isCompleted, editing: isEditing })}>
      <div className="view">
        <Complete todo={todo} />
        <Editing todo={todo} />
        <Remove todo={todo} />
      </div>
      <Input todo={todo} />
    </li>
  )
}

export default observer(Todo);
